import React, { useEffect } from 'react';
//@ts-ignore
import Pdfh5 from '@jdcfe/pdfh5';
import '@jdcfe/pdfh5/css/pdfh5.css';

const Pdf = (props: any) => {

  const { src, renderType, maxZoom, responseType } = props;


  useEffect(() => {
    let options:any = {
      pdfurl: src,
      responseType: responseType || 'arraybuffer',
      maxZoom: maxZoom || 2,
      scale: 1,
      renderType: renderType || 'svg',
      disableStream: true,
      zoomEnable: true,
      cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/"
    };

    //实例化
    const pdfh5 = new Pdfh5('#demo', options);
    // 渲染中事件
    pdfh5.on('ready', () => {
      console.log("pdf准备开始渲染-111");
    });
    // 加载完成
    pdfh5.on('complete', function (status: any, msg: any, time: any) {
      console.log(
        '状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒，总页数：' + pdfh5.totalNum,
      );
      pdfh5.zoomEnable(true);
    });
    // 加载成功
    pdfh5.on('success', (msg: string, time: number) => {
      console.log("pdf渲染完成，总耗时" + time + "秒", msg);
    });
    // 加载失败
    pdfh5.on('error', (msg: string, time: number) => {
      console.log("pdf渲染完成，总耗时" + time + "秒", msg);
    });
    // 销毁监听
    pdfh5.on('destroy', () => {
      console.log('pdf 销毁成功');
    });
    
  }, [props.src]);

  return <div id="demo"></div>;
};

export default Pdf;
